<template>
	<div class="container">
		<div class="avatar-container arrow">
			<div>
				<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2391574581,3457366942&fm=26&gp=0.jpg" />
				<span>修改头像&nbsp;&nbsp;</span>
			</div>
		</div>
		<!-- 昵称 -->
		<div class="ipt-container">
			<span>昵称</span>
			<input type="text" value="" placeholder="请输入昵称" />
		</div>
		<!-- 手机号 -->
		<div class="ipt-container">
			<span>手机号码</span>
			<input type="number" value="" placeholder="请输入手机号码" />
		</div>
		<!-- 姓名 -->
		<div class="ipt-container">
			<span>真实号码</span>
			<input type="text" value="" placeholder="请输入真实姓名" />
		</div>
		<!-- 支付宝账号 -->
		<div class="ipt-container">
			<span>支付宝账号</span>
			<input type="number" value="" placeholder="请输入支付宝账号" />
		</div>
		<!-- 保存资料 -->
		<div class="confirm-data">保存资料</div>
	</div>
</template>

<script>
	export default {

	}
</script>

<style scoped="scoped" lang="less">
	.container {
		.avatar-container {
			background: #fff;
			padding: .3rem;

			div:first-child {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 14px;
				color: #9B9B9B;

				img {
					width: 1.6rem;
					height: 1.6rem;
					border-radius: 50%;
					border: .01rem solid #F6F6F6;
				}
			}
		}

		.ipt-container {
			padding: .3rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100vw;
			background: #fff;
			border-top: .01rem solid #F6F6F6;

			span {
				font-size: 14px;
				color: #9B9B9B;
			}

			input::-webkit-input-placeholder {
				font-family: PingFangSC-Regular;
				font-size: 14px;
				color: #9B9B9B;
			}
		}

		.confirm-data {
			margin: 1.4rem auto 0 auto;
			width: 5.82rem;
			height: 1rem;
			background-image: linear-gradient(-119deg, #3AB8FF 0%, #218BFB 100%);
			border-radius: 5px;
			font-size: 17px;
			color: #FFFFFF;
			text-align: center;
			line-height: 1rem;
		}
	}
</style>
